<template>
  <view class="signature-container">
    <canvas 
      class="signature-canvas" 
      canvas-id="signatureCanvas"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    ></canvas>
    <view class="signature-actions">
      <button class="action-btn clear-btn" @click="clearCanvas">清除</button>
      <button class="action-btn save-btn" @click="saveSignature">保存</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  width: {
    type: Number,
    default: 300
  },
  height: {
    type: Number,
    default: 200
  },
  lineWidth: {
    type: Number,
    default: 3
  },
  lineColor: {
    type: String,
    default: '#000000'
  }
})

const emit = defineEmits(['save'])

const canvasWidth = ref(props.width)
const canvasHeight = ref(props.height)
const context = ref(null)
const isDrawing = ref(false)
const lastX = ref(0)
const lastY = ref(0)

onMounted(() => {
  setTimeout(() => {
    initCanvas()
  }, 100)
})

const initCanvas = () => {
  context.value = uni.createCanvasContext('signatureCanvas')
  
  // 设置背景色
  context.value.setFillStyle('#ffffff')
  context.value.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
  
  // 设置画笔样式
  context.value.setStrokeStyle(props.lineColor)
  context.value.setLineWidth(props.lineWidth)
  context.value.setLineCap('round')
  context.value.setLineJoin('round')
  
  context.value.draw()
}

const onTouchStart = (e) => {
  const touch = e.touches[0]
  isDrawing.value = true
  lastX.value = touch.x
  lastY.value = touch.y
}

const onTouchMove = (e) => {
  if (!isDrawing.value || !context.value) return
  
  const touch = e.touches[0]
  const currentX = touch.x
  const currentY = touch.y
  
  context.value.beginPath()
  context.value.moveTo(lastX.value, lastY.value)
  context.value.lineTo(currentX, currentY)
  context.value.stroke()
  context.value.draw()
  
  lastX.value = currentX
  lastY.value = currentY
}

const onTouchEnd = () => {
  isDrawing.value = false
}

const clearCanvas = () => {
  if (!context.value) return
  
  context.value.setFillStyle('#ffffff')
  context.value.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
  
  // 重新设置画笔样式
  context.value.setStrokeStyle(props.lineColor)
  context.value.setLineWidth(props.lineWidth)
  context.value.setLineCap('round')
  context.value.setLineJoin('round')
  
  context.value.draw()
}

const saveSignature = () => {
  if (!context.value) return
  
  uni.canvasToTempFilePath({
    canvasId: 'signatureCanvas',
    success: (res) => {
      emit('save', res.tempFilePath)
      uni.showToast({
        title: '签名已保存',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.error('保存签名失败:', err)
      uni.showToast({
        title: '保存失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.signature-container {
  width: 100%;
  
  .signature-canvas {
    border: 2rpx solid #e0e0e0;
    border-radius: 8rpx;
    background: #ffffff;
    display: block;
    margin: 0 auto;
  }
  
  .signature-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      border: none;
      
      &.clear-btn {
        background: #f5f5f5;
        color: #666;
      }
      
      &.save-btn {
        background: #007aff;
        color: #ffffff;
      }
    }
  }
}
</style> 